import React from 'react';
import { Button } from './components/Button';
import { Alert,AlertType } from './components/Alert';
import { Menu, MenuItem, SubMenu } from './components/Menu';
import { Icon } from './components/Icon/Icon';


const App: React.FC = () => {

  return (
    <div className="App">
      <header className="App-header">
        <Button btnType='primary'>Hello Button</Button>
        <Button btnType="danger" size="lg" disabled={true}>Hello Button</Button>
        <Button btnType="link" href="http://www.baidu.com">Hello Button</Button>
        <Button btnType="link" disabled={true} href="http://www.baidu.com">Hello Button</Button>
        <Button className='custom'  onClick={(e)=>{alert(33)}}>ada</Button>
      </header>
      <div>
        <Alert message='testing1' type={AlertType.Info} style={{width:"200px"}} />
        <Alert message='testing2' type={AlertType.Success} closable={true} style={{ width: "200px" }} />
        <Alert message='testing3' type={AlertType.Warning} action={<Button size="sm">UNDO</Button>} />
        <Alert message='testing4' type={AlertType.Danger} description='jahgsdiasdhakshdakudhkuad' closable={true} />
        <Alert message='testing4' type={AlertType.Danger} description='jahgsdiasdhakshdakudhkuad' closable={true} closeIcon={<Icon icon="coffee" theme='primary' />} />
        <Alert message='testing4' type={AlertType.Danger} description='jahgsdiasdhakshdakudhkuad' closable={true} closeIcon={<p>qwewq</p>} />
      </div>
      <div>
        <Menu defaultIndex={"0"} mode='vertical' >
          <MenuItem >
            cool link
          </MenuItem>
          <MenuItem disabled >
            cool link2
          </MenuItem>
         
          <MenuItem  >
            cool link3
          </MenuItem>
        </Menu>
      </div>
      <div>
        <Menu defaultIndex={"0"} mode="horizontal" >
          <MenuItem >
            cool link
          </MenuItem>
          <MenuItem disabled>
            cool link2
          </MenuItem>
          <SubMenu title="dropdown">
            <MenuItem >
              dropdown 1
            </MenuItem>
            <MenuItem >
              dropdown 2
            </MenuItem>
          </SubMenu>
          <MenuItem >
            cool link3
          </MenuItem>
        </Menu>
      </div>
      <div>
        <Icon icon="coffee" theme='primary' size='10x' />
      </div>
    </div>
  );
}

export default App;
